<template>
  <div class="admin-comments">
    <div class="page-header">
      <h2>评论管理</h2>
      
      <div class="search-box">
        <el-input
          placeholder="搜索评论内容"
          v-model="searchContent"
          clearable
          @clear="handleSearch"
          style="width: 200px; margin-right: 10px;">
        </el-input>
        
        <el-select v-model="searchStatus" placeholder="评论状态" clearable @change="handleSearch" style="width: 120px; margin-right: 10px;">
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="已通过" :value="1"></el-option>
          <el-option label="已拒绝" :value="2"></el-option>
        </el-select>
        
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
    </div>
    
    <el-table
      :data="commentList"
      border
      v-loading="loading"
      style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="photoId" label="作品ID" width="80"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称" width="120"></el-table-column>
      <el-table-column prop="content" label="评论内容">
        <template slot-scope="scope">
          <div class="comment-content">{{ scope.row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="likeCount" label="点赞数" width="80" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="评论时间" width="160">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-view"
            circle
            @click="viewPhotoDetail(scope.row.photoId)">
          </el-button>
          <el-button
            v-if="scope.row.status === 0"
            size="mini"
            type="success"
            icon="el-icon-check"
            circle
            @click="handleApprove(scope.row)">
          </el-button>
          <el-button
            v-if="scope.row.status === 0"
            size="mini"
            type="danger"
            icon="el-icon-close"
            circle
            @click="handleReject(scope.row)">
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination" v-if="total > 0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminComments',
  data() {
    return {
      commentList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchContent: '',
      searchStatus: ''
    }
  },
  created() {
    this.fetchComments()
  },
  methods: {
    async fetchComments() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          content: this.searchContent,
          status: this.searchStatus
        }
        const res = await this.$http.get('/comments/page', { params })
        if (res.data.code === 1) {
          this.commentList = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error('获取评论列表失败')
        }
      } catch (error) {
        console.error('获取评论列表失败', error)
        this.$message.error('获取评论列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchComments()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchComments()
    },
    viewPhotoDetail(photoId) {
      this.$router.push(`/photo/${photoId}`)
    },
    handleApprove(row) {
      this.$confirm(`确定通过ID为${row.id}的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(async () => {
        try {
          const res = await this.$http.put('/comments/status', {
            id: row.id,
            status: 1
          })
          if (res.data.code === 1) {
            this.$message.success('审核通过成功')
            this.fetchComments()
          } else {
            this.$message.error(res.data.msg || '操作失败')
          }
        } catch (error) {
          console.error('审核失败', error)
          this.$message.error('审核失败')
        }
      }).catch(() => {})
    },
    handleReject(row) {
      this.$confirm(`确定拒绝ID为${row.id}的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await this.$http.put('/comments/status', {
            id: row.id,
            status: 2
          })
          if (res.data.code === 1) {
            this.$message.success('审核拒绝成功')
            this.fetchComments()
          } else {
            this.$message.error(res.data.msg || '操作失败')
          }
        } catch (error) {
          console.error('审核失败', error)
          this.$message.error('审核失败')
        }
      }).catch(() => {})
    },
    handleDelete(row) {
      this.$confirm(`确定删除ID为${row.id}的评论吗？该操作不可恢复`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          const res = await this.$http.delete(`/comments/${row.id}`)
          if (res.data.code === 1) {
            this.$message.success('删除成功')
            this.fetchComments()
          } else {
            this.$message.error(res.data.msg || '删除失败')
          }
        } catch (error) {
          console.error('删除失败', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {})
    },
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      }
      return statusMap[status] || '未知'
    },
    getStatusTagType(status) {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      }
      return typeMap[status] || 'info'
    },
    formatDateTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return date.toLocaleString()
    }
  }
}
</script>

<style scoped>
.admin-comments {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #34495e;
  font-size: 24px;
}

.search-box {
  display: flex;
  align-items: center;
}

.comment-content {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style> 